<html>
<head>
<title>Demo</title>
<style type="text/css">
div#wn	{ 
    position:relative; 
    width:220px; height:120px;
    overflow:hidden;	
	}
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1');
    wndo.setUpScrollControls('scrollLinks');
}

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

</script>
</head>
<body>

<h1>Vertical Mouseover Scrolling</h1>



<div id="wn">
    <div id="lyr1">
        <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
        <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
        <p>The code supports the capability to hide or swap images when the end is reached.  Further information is provided upon request to licensed users of the code.</p>
        <p>Content repeated for your scrolling pleasure :)</p>
        <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
        <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
        <p>The code supports the capability to hide or swap images when the end is reached.  Further information is provided upon request to licensed users of the code.</p>
    </div>
</div>  <!-- end wn div -->


<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
<div id="scrollLinks">
    <a class="mouseover_up" href="#"><img src="images/tri-up.gif" alt="" border="0" /></a>
    <a class="mouseover_down" href="#"><img src="images/tri-dn.gif" alt="" border="0" /></a>
</div>


<p>Back to <a href="index.html">index</a></p>



</body>
</html>
